@charset "UTF-8";
@import "variables", "mixin";

@import "normalize-version";
/*base*/
@import "normalize/base";
/*html5*/
@import "normalize/html5";

@import "compass/layout";
/*!
 * CONTENTS
 *
 * SETTINGS
 * variables..............变量集中存储文件
 * mixin..................mixin集中存储文件
 *
 * TOOLS
 *
 * COMPONENTS
 * reset.................Compass内置浏览器重置样式文件
 *
 * BUSINESS
 *
 * BASE
 * screen.................针对当前站点主页的样式修饰
 */

//主标题样式
.headline {
    font-family: $headline-ff;
}

/*页面主体样式*/
.main-sec {
    font-family: $main-sec-ff;

    @at-root {
        .main-sec-headline {
            font: {
                family: $main-sec-ff;
                size: 12px;
            }
        }

        .main-sec-detail {
            font-size: 12px;
        }
    }
}

p {
    color: hsl(270, 100%, 50%);
}

/*使用mixin*/
.web-demo-sec {
    @include col-sm(50%);

    &:hover {
        background-color: #f5f5f5;
    }
}

/*选择器样式的继承*/
%error {
    color: #f00;
}

%error.instrusion {
    background-image: url("/images/hacked.png");
}

.serious-error {
    @extend %error;
    border: 1px #f00;
}

.most-serious-error {
    @extend .serious-error;
    background: #fffff5;
}
